/* 主容器样式 */
.container {
  @apply flex min-h-screen items-center justify-center bg-white;
}

.formContainer {
  @apply w-full max-w-md space-y-8 p-8;
}

/* 水印样式 */
.watermark {
  @apply pointer-events-none absolute inset-0 flex items-center justify-center text-6xl font-bold text-gray-400 opacity-5;
}

/* 标题样式 */
.title {
  @apply relative z-10 text-center;
}

.titleText {
  @apply mb-2 text-2xl font-bold text-gray-900;
}

/* 进度指示器样式 */
.progressContainer {
  @apply relative z-10 flex items-center justify-center space-x-4;
}

.progressStep {
  @apply flex items-center;
}

.progressStepText {
  @apply text-sm font-medium;
}

.progressStepActive {
  @apply text-gray-900;
}

.progressStepInactive {
  @apply text-gray-400;
}

.progressDivider {
  @apply h-px w-8 border-t border-dashed border-gray-300;
}

/* 表单样式 */
.form {
  @apply relative z-10;
}

.formSection {
  @apply space-y-6;
}

.formFields {
  @apply space-y-4;
}

.formField {
  @apply block;
}

.formLabel {
  @apply mb-1 block text-sm font-medium text-gray-700;
}

.formInput {
  @apply bg-gray-50 relative block w-full appearance-none rounded-lg border border-gray-300 px-3 py-3 text-gray-900 placeholder-gray-500 focus:z-10 focus:border-gray-400 focus:outline-none focus:ring-0 sm:text-sm;
}

/* 错误提示样式 */
.errorMessage {
  @apply bg-red-50 text-red-600 rounded-lg p-2 text-center text-sm;
}

/* 按钮样式 */
.buttonContainer {
  @apply block;
}

.submitButton {
  @apply border-transparent group relative flex w-full justify-center rounded-lg border bg-gray-600 px-4 py-3 text-sm font-medium text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50;
}

.loadingContainer {
  @apply flex items-center;
}

.loadingSpinner {
  @apply -ml-1 mr-3 h-5 w-5 animate-spin text-white;
}

/* 测试账号提示样式 */
.testAccountContainer {
  @apply mt-6 rounded-lg bg-blue-50 p-4;
}

.testAccountTitle {
  @apply text-blue-800 mb-2 text-sm font-medium;
}

.testAccountList {
  @apply text-blue-700 space-y-1 text-xs;
}

/* 重新开始按钮样式 */
.restartButton {
  @apply text-center;
}

.restartButtonText {
  @apply text-sm text-gray-500 hover:text-gray-700;
}

/* 成功页面样式 */
.successContainer {
  @apply space-y-6 text-center;
}

.successIcon {
  @apply mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-green-100;
}

.successIconSvg {
  @apply h-8 w-8 text-green-600;
}

.successTitle {
  @apply text-lg font-medium text-gray-900;
}

.successDescription {
  @apply mt-2 text-sm text-gray-600;
}

.progressBarContainer {
  @apply flex justify-center;
}

.progressBar {
  @apply h-2 w-32 rounded-full bg-gray-200;
}

.progressBarFill {
  @apply bg-blue-600 h-2 w-24 animate-pulse rounded-full;
}

/* 弹窗样式 */
.modalOverlay {
  @apply fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50;
}

.modalContainer {
  @apply mx-4 w-full max-w-md rounded-lg bg-white p-8;
}

.modalContent {
  @apply text-center;
}

.modalIcon {
  @apply mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-green-100;
}

.modalIconSvg {
  @apply h-8 w-8 text-green-600;
}

.modalTitle {
  @apply mb-2 text-lg font-medium text-gray-900;
}

.modalDescription {
  @apply mb-6 text-sm text-gray-600;
}

.modalButtons {
  @apply flex justify-center space-x-4;
}

.modalButton {
  @apply rounded-lg px-6 py-2 text-sm font-medium transition-colors;
}

.modalButtonPrimary {
  @apply bg-gray-600 text-white hover:bg-gray-700;
}

.modalButtonSecondary {
  @apply bg-gray-200 text-gray-700 hover:bg-gray-300;
}
